<template>
  <div class="approval-details">
    <div v-loading="loading" class="approval-details__card card">
      <div v-if="eventId" class="approval-details__content">
        <ReserveDetail
          v-if="eventTypeCode === RESERVE_CONFERENCE_ROOM"
          :record-id="eventId"
          :status="getApprovalStatus()"
        />

        <VehicleDetail
          v-if="eventTypeCode === DISPATCH_VEHICLES"
          :record-id="eventId"
          :status="getApprovalStatus()"
        />

        <KilometerRegisterDetail
          v-if="eventTypeCode === REGISTER_KILOMETER"
          :record-id="eventId"
          :status="getApprovalStatus()"
        />
      </div>
      <div style="width: 45%;margin-top: 20px;">
        <div class="title" style="margin-bottom: 20px;">
          审批流程
        </div>

        <ApprovalNodes
          :nodes="nodes"
          :status="detail?.status"
        />
      </div>

    </div>
  </div></template>
<script>
import { getApprovalRecordsDetails } from '@/api/approvalFlow'
import ApprovalNodes from '@/views/approvalFlow/components/approvalRecordDetails/ApprovalNodes.vue'
import ReserveDetail from '@/views/approvalFlow/components/approvalRecordDetails/ReserveDetail.vue'
import VehicleDetail from '@/views/approvalFlow/components/approvalRecordDetails/VehicleDetail.vue'
import { RESERVE_CONFERENCE_ROOM, DISPATCH_VEHICLES, REGISTER_KILOMETER } from './js/constant'
import KilometerRegisterDetail from '@/views/approvalFlow/components/approvalRecordDetails/KilometerRegisterDetail.vue'
export default {
  name: '',
  components: {
    KilometerRegisterDetail,
    ApprovalNodes,
    ReserveDetail,
    VehicleDetail
  },
  data() {
    return {
      loading: false,
      detail: null,
      eventId: null,
      recordId: null,
      nodes: [],
      eventTypeCode: null,
      RESERVE_CONFERENCE_ROOM,
      DISPATCH_VEHICLES,
      REGISTER_KILOMETER
    }
  },
  created() {
    const route = this.$route
    this.recordId = route.params.id
    this.getApprovalRecordsDetails()
  },
  methods: {
    async getApprovalRecordsDetails() {
      this.loading = true
      try {
        const res = await getApprovalRecordsDetails({ id: this.recordId })
        this.detail = res.data
        this.eventId = res.data.event_id
        this.nodes = this.processTemplateNodes(res.data.instance_nodes)
        this.eventTypeCode = res.data.instance_nodes?.[0]?.node?.template?.type?.code
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '审批详情获取失败')
      } finally {
        this.loading = false
      }
    },

    processTemplateNodes(instanceNodes) {
      return instanceNodes.map(instanceNode => {
        const node = instanceNode.node

        // 处理审批人数据
        const processedAssignees = instanceNode.assignees.filter(assignee => {
          return !instanceNode.action.some(action => action.user_id === assignee.user?.id)
        }).map(assignee => {
          return {
            user_id: assignee.user?.id,
            username: assignee.user?.username,
            phone: assignee.user?.phone,
            gender: assignee.user?.gender,
            avatar: assignee.user?.avatar
          }
        })

        const actionNodes = instanceNode.action.map(action => {
          return {
            parent_id: instanceNode.id,
            instance_node_id: instanceNode.id,
            node_status: instanceNode.status,
            node_id: instanceNode.node_id,
            node_name: node.name,
            step_order: node.step_order,
            avatar: action.user?.avatar,
            user_id: action.user?.id,
            username: action.user?.username,
            nodeCollapse: true,
            isUserNode: true,
            action
          }
        })

        // 主节点
        const mainNode = {
          instance_node_id: instanceNode.id,
          node_status: instanceNode.status,
          node_id: instanceNode.node_id,
          node_name: node.name,
          step_order: node.step_order,
          assignees: processedAssignees,
          type: node.type,
          action: instanceNode.action,
          nodeCollapse: true,
          isUserNode: false
        }

        // 如果 isUserNode 为 false 且 assignees 为空，则不放入主节点
        const filteredNodes = []
        if (
          !(mainNode.isUserNode === false && mainNode.assignees.length === 0) &&
          (mainNode.isUserNode === false && mainNode.node_status === 'wait' || !mainNode.node_status)
        ) {
          filteredNodes.push(mainNode)
        }

        // 返回处理后的节点结构：将 actionNodes 放在父节点之前
        return [
          ...actionNodes, // actionNodes 展开在前
          ...filteredNodes // 过滤后的主节点在后
        ]
      }).flat()
    },

    getApprovalStatus() {
      const statusMap = {
        approved: {
          text: '审批通过',
          tag: 'success',
          color: '#67C23A'
        },
        refuse: {
          text: '审批拒绝',
          tag: 'danger',
          color: '#F56C6C'
        },
        revoke: {
          text: '审批撤销',
          tag: 'info',
          color: '#333'
        }
      }

      const defaultStatus = {
        text: '等待审批',
        tag: 'warning',
        color: '#E6A23C'
      }

      return statusMap?.[this.detail?.status] || defaultStatus
    }
  }
}
</script>
<style lang="scss" scoped>
.approval-details {
  padding: 20px;

  &__card {
    min-height: 300px;
  }

  .custom-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
    overflow: hidden;

    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .username-initial {
      font-size: 16px;
      color: #409eff;
    }

    .el-icon-s-check {
      font-size: 20px;
      color: #409eff;
    }
  }

  .title {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
